<template>
	<view class="task_giftlist_page">
		<view class="task_giftlist_top">
			<image class="task_gift_top_bk" :src="onlinePic+'task/task_gift_top_bk.png'" mode="aspectFill"></image>
			<view class="task_rules_box">
				<uni-icons type="info" size="10" color="#999999"></uni-icons>
				<view style="margin-left: 5rpx;" @click="goOildRule">集油规则</view>
			</view>
			<view class="oli_nums_box">
				<view class="oli_nums">{{integral}}L</view>
				<view class="f-13" @click="goOilDetail">明细 ></view>
			</view>
		</view>
		<view class="giftlist_box">
			<view class="f-15">礼品兑换</view>
			<view class="mt-20">
				<uni-row :gutter="40">
					<uni-col v-for="(item,index) in list" :key="item.goods_id" :span="12">
						<view class="giftlist_cell" @click="goGoodsInfo(item.goods_id,item.name,index)">
							<view class="giftlist_img_box">
								<image class="giftlist_img" :src="picUrl+item.cover_img" mode="aspectFill">
								</image>
							</view>
							<view class="giftlist_cell_info">
								<view class="ellipsis f-13 mt-10">{{item.name}}</view>
								<view class="display_flex mt-10">
									<image class="giftlist_oil_icon" :src="onlinePic+'task/oil.png'"></image>
									<view class="f-13 f-w ml-5 flex-1">{{item.price}}L</view>
									<view class="giftlist_cell_btn">兑换</view>
								</view>
							</view>
						</view>
					</uni-col>
				</uni-row>
				<view class="page_bottom_loading" style="padding-bottom:50rpx;">{{loadingTitle}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTaskGoodsList,
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				list: [],
				params: {
					page: 1,
					size: 10
				},
				current_page: '',
				last_page: '',
				loadingTitle: '',
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				integral: uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').integral : 0,
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			if (uni.getStorageSync('onload')) {
				this.integral = uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').integral : 0
				this.getTaskGoodsList()
				uni.removeStorage({
					key: 'onload'
				})
			}
		},
		onLoad() {
			uni.showLoading({})
			this.getTaskGoodsList()
			var params = {
				event_code: '礼品兑换礼品列表',
				path: 'pages/taskcentre/giftlist',
				event_id: '',
				title: '',
				source_page: '',
				value: '',
			}
			app.BurialPoint(params)
		},
		methods: {
			getTaskGoodsList() {
				getTaskGoodsList(this.params).then(res => {
					if (res.state == 1) {
						uni.hideLoading()
						this.list = [...this.list, ...res.data.data]
						this.current_page = res.data.current_page
						this.last_page = res.data.last_page
						if (this.list.length == 0) {
							this.loadingTitle = "- 暂无更多 -"
						}
					} else {
						uni.hideLoading()
						this.loadingTitle = "- 暂无更多 -"
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			goGoodsInfo(goods_id, name, index) {
				uni.navigateTo({
					url: '/pages/taskcentre/giftinfo?scene=' + goods_id
				})
				var params = {
					event_code: '礼品兑换礼品列表',
					path: 'pages/taskcentre/giftlist',
					event_id: goods_id,
					title: name,
					source_page: '礼品兑换礼品列表-兑换',
					value: '',
				}
				app.BurialPoint(params)
			},
			goOilDetail() {
				uni.navigateTo({
					url: '/pages/taskcentre/oildetail'
				})
				var params = {
					event_code: '礼品兑换礼品列表',
					path: 'pages/taskcentre/giftlist',
					event_id: '',
					title: '',
					source_page: '礼品兑换礼品列表-明细',
					value: '',
				}
				app.BurialPoint(params)
			},
			goOildRule() {
				uni.navigateTo({
					url: '/pages/taskcentre/taskrule'
				})
				var params = {
					event_code: '礼品兑换礼品列表',
					path: 'pages/taskcentre/giftlist',
					event_id: '',
					title: '',
					source_page: '礼品兑换礼品列表-集油规则',
					value: '',
				}
				app.BurialPoint(params)
			}
		},
		onReachBottom() {
			if (this.current_page < this.last_page) {
				this.showLoading = true
				this.params.page = this.params.page + 1
				this.getTaskGoodsList()
			} else {
				this.showLoading = false
				if (this.list.length > 0) {
					this.loadingTitle = "- 已经到底了 -"
				} else {
					this.loadingTitle = "- 暂无更多 -"
				}

			}
		},
		onPullDownRefresh() {
			this.params.page = 1
			this.list = []
			this.getTaskGoodsList()
			uni.stopPullDownRefresh()
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {

			}
		},
		onShareTimeline: function() {
			app.getShareTask()
			return {

			}
		},
	}
</script>

<style lang="scss">
	.task_giftlist_page {

		.task_giftlist_top {
			position: relative;
			width: 100%;
			height: 320rpx;

			.task_gift_top_bk {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				z-index: -1;
				width: 100%;
				height: 320rpx;
			}
		}

		.task_rules_box {
			color: #999999;
			font-size: 20rpx;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}

		.oli_nums_box {
			padding: 37rpx 50rpx;

			.oli_nums {
				color: #000000;
				font-size: 50rpx;
				font-weight: bold;
			}
		}

		.giftlist_box {
			padding: 50rpx;

			.giftlist_cell {
				margin-bottom: 40rpx;
				border-radius: 8rpx;
				border: 1rpx solid #F1F1F1;

				.giftlist_img_box {
					width: 100%;
					height: 304rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #F1F1F1;

					.giftlist_img {
						width: 100%;
						height: 304rpx;
					}
				}

				.giftlist_cell_info {
					padding: 0 20rpx 30rpx 20rpx;
				}

				.giftlist_oil_icon {
					width: 19rpx;
					height: 23rpx;
				}

				.giftlist_cell_btn {
					width: 85rpx;
					height: 32rpx;
					color: #ffffff;
					font-size: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 30rpx;
					background-color: #00A0DC;
				}
			}
		}
	}
</style>